<template>
  <div id="app">
    <my-header>{{headerTitle}}</my-header>
    <search-input
    :placeholder="placeholder"
    :maxlength="maxlength"
    ></search-input>
    <router-view />

    <tab />
  </div>
</template>

<script>
import MyHeader from "@/components/Header";
import Tab from "@/components/Tab";
import SearchInput from "@/components/SearchInput"


import { computed, watch, onMounted } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
export default {
  name: "App",
  components: {
    MyHeader,
    Tab,
    SearchInput
  },
  setup() {
    const store = useStore(),
      state = store.state,
      router = useRouter();

    router.push("/");
    // 初始的时候设置 plachholder
    store.commit('setPlaceholder', 'day')

    // 监听路由联动
    watch(
      () => {
        return router.currentRoute.value.name;
      },
      (value) => {
        store.commit("setHeaderTitile", value);
        store.commit("setPlaceholder", value);
        store.commit("setMaxLength", value);
      }
    );
    return computed(() => state).value; // {}
  },
};
</script>
